<template>
	<view class="details">
		<view class="top">
			<swiper class="swiper" @change='indexChange' :indicator-dots="false">
				<swiper-item v-for="(item,index) in shopInfo.images" :key="index">
					<view class="swiper-item">
						<image :src="http+item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<view v-if="shopInfo.images" class="bcgnum">{{active}}/{{shopInfo.images.length}}</view>
		</view>
		<view class="content">
			<view class="c_top">
				<view class="left">
					<view class="name">
						<view class="name_title">
							{{shopInfo.title||''}}
						</view>
					</view>
					<view class="n_box" v-for="v in shopInfo.labelList" :key="v.id">{{v.name||''}}</view>
					<view class="money">
						￥{{shopInfo.price||''}}
					</view>
				</view>
				<view v-if="infos.member.distribution_id == 1" class="right" @click="toCollect1">
					<view class="img">
						<image src="/static/index/ewm.png" mode=""></image>
					</view>
					<view class="text">
						分销码
					</view>
				</view>
				<view class="right" @click="toCollect">
					<view class="img">
						<image v-if="is_collect==2" src="../../static/index/shoucang.png" mode=""></image>
						<image v-else src="../../static/index/shoucang2.png" mode=""></image>
					</view>
					<view class="text">
						收藏
					</view>
				</view>
			</view>
			<view class="address">
				<view class="a_left">
					<image src="../../static/index/dizhi2.png" mode=""></image>
				</view>
				<view class="a_right">
					{{shopInfo.provice||''}}{{shopInfo.city||''}}{{shopInfo.area||''}}{{shopInfo.address||''}}
				</view>
			</view>
			<view class="msg">
				<view class="title">
					<view class="m_line"></view>
					<view class="m_text">购买须知</view>
				</view>
				<u-parse :content="shopInfo.notice"></u-parse>
				<view class="title">
					<view class="m_line"></view>
					<view class="m_text">产品介绍</view>
				</view>
				<u-parse :content="shopInfo.content"></u-parse>
				<canvas style="" v-if='isshow' canvas-id="myCanvas"
					:style="{ width: canvasWidth, height: canvasHeight }"></canvas>
			</view>
		</view>

		<view class="btns">
			<view v-if="infos.mobile" class="btn" @click="toReserve">
				立即预定
			</view>
			<button v-else class="btn" type="default" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumbers">立即预定</button>
		</view>
		<!-- 			<view class="right" @click="toCollect1">
			<view class="img">
				<image src="/static/index/ewm.png" mode=""></image>
			</view>
			<view class="text">
				分销码
			</view>
		</view>
	<canvas style="" v-if='isshow' canvas-id="myCanvas"
					:style="{ width: canvasWidth, height: canvasHeight }"></canvas> -->
		<uni-popup type="center" ref="canvas" @change="popchange">
			<view class="canvaspop">
				<image @longtap="saveImage()" :src="imgs" mode="" :style="{ width: canvasWidth, height: canvasHeight }">
				</image>
				<view class="imgs" @click="saveImage">
					<image src="/static/bc.png" mode=""></image>
					<view class="">
						保存图片
					</view>
				</view>
			</view>
		</uni-popup>




		<uni-popup type="bottom" ref="popup" :safe-area="false">
			<view class="popup">
				<view class="top_box" v-if="shopInfo.image">
					<view class="re_top">
						<view class="re_img">
							<image :src="http+shopInfo.image" mode="aspectFill"></image>
						</view>
						<view class="re_money">
							<text>￥</text>{{spec[index2].price||''}}
						</view>
					</view>
				</view>

				<view class="select">
					<view class="se_title">
						规格
					</view>
					<view class="tt">
						<view class="se_list">
							<view :class="index2==i?'list2':'list'" v-for="(v,i) in spec" :key="v.id" :data-i="i"
								@click="change">
								{{v.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="re_list">
					<view class="l_left">
						购买数量
					</view>
					<view class="l_right">
						<view class="r_one">

						</view>
						<view class="r_two">
							<view class="add" @click="toMinus">
								-
							</view>
							<view class="num">
								<input class="input" type="number" :value="num" @input="getNum" />
							</view>
							<view class="add" @click="toAdd">
								+
							</view>
						</view>
					</view>
				</view>
				<view class="re_list">
					<view class="l_left">
						使用日期
					</view>
					<view class="l_right">
						<picker mode="date" class="r_picker" :start="Stime" @change="getDate">
							<view class="" v-if="date==''">
								请选择使用日期
							</view>
							<view class="" v-else>
								{{date}}
							</view>
						</picker>
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
				<view class="re_list">
					<view class="l_left">
						联系人
					</view>
					<view class="l_right">
						<view class="r_picker">
							<input type="text" v-model="name" placeholder="请填写联系人" />
						</view>
					</view>
				</view>
				<view class="re_list">
					<view class="l_left">
						联系电话
					</view>
					<view class="l_right">
						<view class="r_picker">
							<input type="text" v-model="phone" placeholder="请填写联系电话" />
						</view>
					</view>
				</view>
				<view class="re_list">
					<view class="l_left">
						身份证号
					</view>
					<view class="l_right">
						<view class="r_picker">
							<input type="text" v-model="id_card" placeholder="请填写身份证号" />
						</view>
					</view>
				</view>
				<view class="re_btn" @click="toPay">
					<view class="bt">
						立即预定
					</view>

				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 1,
				name: '',
				phone: '',
				id_card: '',
				date: '',
				mid: 0,
				id: 0,
				shopInfo: {},
				http: this.$httpimg,
				ticketimage: [],
				spec: [],
				index: 0,
				index2: 0,
				is_collect: 2,
				Stime: '',
				active: 1,
				infos: {},



				myCanvas: {
					img: '',
					title: '',
					price: '',
					address: '',
					name: '',
					headimg: '',
					rwm: ''
				},
				canvasWidth: 285, //画布宽度
				canvasHeight: 440, //画布高度
				ratio: 0, //计算UI设计稿和你手机的屏幕宽度比例（例如UI设计稿是750宽度 你
				widths: '',
				heights: '',
				imgs: '', //最后生成的图片
				isshow: false,
			}
		},
		onLoad(o) {
			console.log(o);
			if(o.scene){
				this.id = o.scene.split('_')[0]
				uni.setStorageSync('distribution_id',o.scene.split('_')[1])
			}else{
				this.id = o.id
				uni.setStorageSync('distribution_id','')
			}
			
			if (!uni.getStorageSync('user')) {
				this.getlogin()
			} else {
				this.infos = uni.getStorageSync('msg')
				this.mid = this.infos.id
				this.getData()
			}
			this.$post('tickets/distribution_code', {
				mid: uni.getStorageSync('msg').id,
				ticket_id: this.id
			}).then(res => {
				if (res.code == 0) {
					this.myCanvas.rwm = this.$http + res.data
				}
			})


			this.getTime()
		},
		onShareTimeline(res) {
			return {
				title: '陶溪川欢迎你！',
				path: `/pages/index/details?id=${this.id}`
			}
		},
		onShareAppMessage(e) {
			return {
				title: '陶溪川欢迎你',
				path: `/pages/index/details?id=${this.id}`
			}
		},
		methods: {
			saveImage() {
				uni.saveImageToPhotosAlbum({
					filePath: this.imgs,
					success: function() {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: "已保存到系统相册",
						})
					},
					fail: function(error) {
						uni.showModal({
							title: '提示',
							content: '若点击不授权，将无法使用保存图片功能',
							cancelText: '不授权',
							cancelColor: '#999',
							confirmText: '授权',
							confirmColor: '#f94218',
							success(res) {
								console.log(res)
								if (res.confirm) {
									// 选择弹框内授权
									uni.openSetting({
										success(res) {
											console.log(res.authSetting)
										}
									})
								} else if (res.cancel) {
									// 选择弹框内 不授权
									console.log('用户点击不授权')
								}
							}
						})
					}
				})
			},
			toCollect1() {
				let that = this
				uni.getSystemInfo({
					success: res => {
						that.ratio = 750 / res.screenWidth
						that.canvasWidth = (570 / that.ratio) + 'px'
						that.widths = (570 / that.ratio)
						that.canvasHeight = (880 / that.ratio) + 'px'
						that.heights = (880 / that.ratio)
					}
				})
				uni.showLoading({
					title: '海报生成中...'
				});
				this.isshow = true
				this.myCanvas.img = this.http + this.shopInfo.image
				this.myCanvas.title = this.shopInfo.title
				this.myCanvas.price = this.shopInfo.price
				this.myCanvas.address = this.shopInfo.provice + this.shopInfo.city + this.shopInfo.area + this.shopInfo.address
				this.myCanvas.name = uni.getStorageSync('msg').nickname ? uni.getStorageSync('msg').nickname : '陶溪川旅游'
				this.myCanvas.headimg = uni.getStorageSync('msg').avatar ? this.http + uni.getStorageSync('msg').avatar :'/static/tou.jpg'
				console.log(this.myCanvas.rwm);
				that.downImgUrl()
			},
			downImgUrl() {
				let that = this
				uni.getImageInfo({
					src: that.myCanvas.img,
					success: function(res) {
						that.myCanvas.img = res.path
						uni.getImageInfo({
							src: that.myCanvas.rwm,
							success: function(res) {
								that.myCanvas.rwm = res.path
								if (uni.getStorageSync('msg').avatar) {
									uni.getImageInfo({
										src: that.myCanvas.headimg,
										success: function(res) {
											that.myCanvas.headimg = res.path
											that.drawPageImg()
										}
									});
								} else {
									that.drawPageImg()
									console.log(111111111111);
								}
							}
						})

					}
				});
			},
			popchange(e) {
				console.log(e);
				this.isshow = !e.show
			},
			// 使用画布绘制页面
			drawPageImg() {
				let _this = this
				// 生成画布
				const ctx = uni.createCanvasContext('myCanvas')
				// 绘制背景
				const bcg = ctx.createLinearGradient(0, 0, 0, _this.heights)
				bcg.addColorStop(0.4, '#FFF4DE')
				bcg.addColorStop(1, '#FFE9D9')
				_this.ctxRectangle(ctx, 0, 0, (_this.widths), (_this.heights), 20, bcg)
				// 图片
				_this.ctxCircular(ctx, _this.myCanvas.img, (26 / _this.ratio), (30 / _this.ratio), (520 / _this
						.ratio),
					(420 / _this.ratio), 6)
				//名称
				_this.ctxText(ctx,
					'bold 15px Arial,PingFang SC',
					'left',
					'#000000',
					_this.myCanvas.title, 26 / _this.ratio, 490 / _this.ratio, 260)
				_this.ctxText(ctx,
					'bold 15px Arial,PingFang SC',
					'left',
					'#000000', '￥' + _this.myCanvas.price, 26 / _this.ratio, 546 / _this.ratio)
				// 图片
				_this.ctxCircular(ctx, '/static/dw.png', (26 / _this.ratio), (566 / _this.ratio), (40 / _this
						.ratio),
					(40 / _this.ratio), 6)
				_this.ctxText(ctx,
					'12px Arial,PingFang SC',
					'left',
					'#000000', _this.myCanvas.address, 76 / _this.ratio, 596 / _this.ratio, 240)
				ctx.beginPath()

				_this.drawLine(ctx, (26 / _this.ratio), (645 / _this.ratio), (540 / _this.ratio), (645 / _this
						.ratio),
					'#E3BAA2', 1)
				// 图片
				_this.ctxCircular(ctx, _this.myCanvas.headimg, (26 / _this.ratio), (694 / _this.ratio), (100 /
						_this
						.ratio),
					(100 / _this.ratio), 25)
				_this.ctxText(ctx,
					'bold 16px Arial,PingFang SC',
					'left',
					'#000000', _this.myCanvas.name, 136 / _this.ratio, 755 / _this.ratio)
				_this.ctxText(ctx,
					'12px Arial,PingFang SC',
					'left',
					'#B7865F', '长按识别，来陶溪川购买吧', 26 / _this.ratio, 825 / _this.ratio)
				// 图片
				_this.ctxCircular(ctx, _this.myCanvas.rwm, (400 / _this.ratio), (694 / _this.ratio), (140 /
						_this.ratio),
					(140 / _this.ratio), 6)
				// 渲染画布
				ctx.draw(false, (() => {
					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: 'myCanvas',
							destWidth: _this.canvasWidth * 2, //展示图片尺寸=画布尺寸1*像素比2
							destHeight: _this.canvasHeight * 2,
							quality: 1,
							fileType: 'jpg',
							success: (res) => {
								uni.hideLoading()
								console.log('通过画布绘制出的图片--保存的就是这个图', res
									.tempFilePath)
								_this.imgs = res.tempFilePath
								this.$refs.canvas.open()
							},
							fail: function(error) {
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									position: 'bottom',
									title: "绘制图片失败", // res.tempFilePath
								})
							}
						}, _this)

					}, 100)
				})())
			},
			drawLine(ctx, x1, y1, x2, y2, color = '#000', lineWidth = 1) {
				ctx.save();
				// 设置线条样式
				ctx.strokeStyle = color;
				ctx.lineWidth = lineWidth;
				// 绘制路径
				ctx.beginPath();
				ctx.moveTo(x1, y1);
				ctx.lineTo(x2, y2);
				ctx.stroke();
				// 恢复原始绘图状态（可选）
				ctx.restore();
			},
			//画一个带圆角矩形
			ctxCircular(ctx, img, x, y, width, height, r, shadow) {
				ctx.beginPath() //开始绘制
				ctx.save() //保存(canvas)状态
				ctx.moveTo(x + r, y)
				ctx.lineTo(x + width - r, y)
				ctx.arc(x + width - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
				ctx.lineTo(x + width, y + height - r)
				ctx.arc(x + width - r, y + height - r, r, 0, Math.PI * 0.5)
				ctx.lineTo(x + r, y + height)
				ctx.arc(x + r, y + height - r, r, Math.PI * 0.5, Math.PI)
				ctx.lineTo(x, y + r)
				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
				if (shadow == 1) {
					ctx.shadowBlur = 20; // 模糊效果程度的
					ctx.shadowColor = 'red'; // 阴影颜色
				}
				// ctx.fill() //对当前路径中的内容进行填充
				ctx.clip() //从原始画布中剪切任意形状和尺寸
				ctx.closePath() //关闭一个路径
				ctx.drawImage(img, x, y, width, height);
				ctx.restore() //恢复(canvas)状态
			},
			//画一个矩形也就是整个海报的背景
			ctxRectangle(ctx, x, y, width, height, r, gnt) {
				ctx.beginPath()
				ctx.save() //保存状态
				ctx.moveTo(x + r, y)
				ctx.lineTo(x + width - r, y)
				ctx.arc(x + width - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
				ctx.lineTo(x + width, y + height - r)
				ctx.arc(x + width - r, y + height - r, r, 0, Math.PI * 0.5)
				ctx.lineTo(x + r, y + height)
				ctx.arc(x + r, y + height - r, r, Math.PI * 0.5, Math.PI)
				ctx.lineTo(x, y + r)
				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
				ctx.fillStyle = gnt
				ctx.fill() //对当前路径中的内容进行填充
				ctx.closePath() //关闭一个路径
			},
			//canvas单行文本自动省略
			fittingString(ctx, str, maxWidth) {
				let strWidth = ctx.measureText(str).width;
				const ellipsis = '…';
				const ellipsisWidth = ctx.measureText(ellipsis).width;
				if (strWidth <= maxWidth || maxWidth <= ellipsisWidth) {
					return str;
				} else {
					var len = str.length;
					while (strWidth >= maxWidth - ellipsisWidth && len-- > 0) {
						str = str.slice(0, len);
						strWidth = ctx.measureText(str).width;
					}
					return str + ellipsis;
				}
			},
			ctxText(ctx, textFont, textAlign, textFillStyle, textName, x, y, maxWidth) {
				ctx.beginPath()
				ctx.save() //保存状态
				//字体
				ctx.font = textFont,
					//字体样式
					ctx.textAlign = textAlign
				//字体颜色
				ctx.fillStyle = textFillStyle
				//填充字体
				if (maxWidth) {
					ctx.fillText(this.fittingString(ctx, textName, maxWidth), x, y)
				} else {
					ctx.fillText(textName, x, y)
				}
			},
			ctxTextWrap(ctx, text, x, y, w) {
				//自动换行介绍
				var temp = ""
				var row = []
				let gxqm = ''
				if (text) {
					gxqm = text
				} else {
					gxqm = '未设置个性签名'
				}
				let gexingqianming = gxqm.split("")
				for (var a = 0; a < gexingqianming.length; a++) {
					if (ctx.measureText(temp).width < w) {} else {
						row.push(temp)
						temp = ""
					}
					temp += gexingqianming[a]
				}
				row.push(temp)
				ctx.font = "13px arail"
				ctx.textAlign = 'left';
				ctx.fillStyle = "#000000"
				for (var b = 0; b < row.length; b++) {
					ctx.fillText(row[b], x, y + (b + 1) * 20)
				}
			},

			getlogin() {
				wx.login({
					provider: 'weixin',
					success: (res) => {
						this.$post('index/login', {
							code: res.code
						}).then(r => {
							if (r.code == 0) {
								uni.setStorageSync('user', {
									id: r.data.id,
									session_key: r.data.session_key
								})
								this.$post('user/index', {
									mid: r.data.id
								}).then(res => {
									if (res.code == 0) {
										uni.setStorageSync('msg', res.data)
										this.infos = res.data
										this.mid = this.infos.id
										this.getData()
									}
								})
							}
						})
					}
				})
			},

			toReserve() {
				// uni.request({
				// 	url:'https://wap.lotsmall.cn/lotsapi/up/api/third/login',

				// })
				if (this.shopInfo.jump_url == '') {
					this.$refs.popup.open()
				} else {
					uni.navigateToMiniProgram({
						appId: this.shopInfo.jump_app_id,
						path: this.shopInfo.jump_url,
						success(res) {
							// 打开成功
						}
					})
					// uni.setStorageSync('url',this.shopInfo.jump_url)
					// uni.navigateTo({
					// 	url:`/pages/index/weburl`
					// })
				}
			},
			getPhoneNumbers(e) {
				if (e.detail.code) {
					this.$post('index/getWxMobile', {
						code: e.detail.code,
						mid: this.infos.id
					}).then(res => {
						if (res.code == 0) {
							this.$post('user/index', {
								mid: this.infos.id,
							}).then(r => {
								if (r.code == 0) {
									uni.setStorageSync('msg', r.data)
									this.infos = uni.getStorageSync('msg')
									this.$refs.popup.open()
								}
							})
						}
					})
				}

			},
			indexChange(e) {
				this.active = e.detail.current + 1
			},

			getData() {
				this.$post('tickets/ticketDetail', {
					mid: this.mid,
					ticket_id: this.id
				}).then(res => {
					if (res.code == 0) {
						this.shopInfo = res.data
						this.is_collect = res.data.is_collect
						this.ticketimage = res.data.ticketimage
						this.spec = res.data.spec
					}
					if (res.code == -3) {
						uni.clearStorage()
						this.getlogin()
					}
					if (res.code == -4) {
						this.getlogin()
					}
				})
			},
			toPay() {
				if (this.num < 1) {
					uni.showToast({
						title: '购买数量不能小于1',
						icon: "none"
					})
					return
				}
				if (this.name === '' || this.phone === '' || this.date === '' || this.id_card == '') {
					uni.showToast({
						title: '请填写完整',
						icon: "none"
					})
					return
				}
				var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.phone)) {
					uni.showToast({
						title: "手机号格式不正确",
						icon: 'none'
					})
					return
				}
				let allprice = this.spec[this.index2].price * this.num
				let obj = {
					allprice: allprice,
					contactname: this.name,
					contactphone: this.phone,
					daytime: this.date,
					mid: this.mid,
					number: this.num,
					id_card: this.id_card,
					oneprice: this.spec[this.index2].price,
					spec: this.spec[this.index2].name,
					ticket_id: this.id,
					distribution_id:uni.getStorageSync('distribution_id')
				}
				this.$post('tickets/orderSubmit', obj).then(res => {
					if (res.code == 0) {
						uni.navigateTo({
							url: 'order?type=1&order_id=' + res.data.order_id
						})
					}
				})
			},
			toCollect() {
				this.$post('tickets/collectTicket', {
					mid: this.mid,
					ticket_id: this.id
				}).then(res => {
					if (res.code == 0) {
						if (this.is_collect == 2) {
							this.is_collect = 1
						} else {
							this.is_collect = 2
						}
					}
				})
			},
			getNum(e) {
				let i = e.target.value
				this.num = Number(i)
			},
			change(e) {
				let i = e.currentTarget.dataset.i
				this.index2 = i
			},
			getDate(e) {
				this.date = e.detail.value
			},
			toMinus() {
				if (this.num > 1) {
					this.num--
				} else {

				}
			},
			toAdd() {
				this.num++
			},
			getTime() {
				var myDate = new Date();
				let y = myDate.getYear(); //获取当前年份(2位)
				let y2 = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
				let m = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
				let d = myDate.getDate(); //获取当前日(1-31)
				let date = myDate.toLocaleDateString(); //获取当前日期
				this.Stime = y2 + '-' + m + '-' + d
			}
		}
	}
</script>

<style lang="less">
	.details {
		image {
			width: 100%;
			height: 100%;
		}

		.top {
			width: 100%;
			height: 500rpx;
			position: relative;

			.swiper {
				height: 500rpx;

				.swiper-item {
					height: 500rpx;

					image {
						height: 500rpx;
					}
				}
			}

			.bcgnum {
				position: absolute;
				right: 20rpx;
				bottom: 40rpx;
				background: rgba(0, 0, 0, 0.4);
				color: #fff;
				font-size: 28rpx;
				width: 77rpx;
				height: 46rpx;
				text-align: center;
				border-radius: 6rpx;
				line-height: 46rpx;
			}
		}

		.btns {
			position: fixed;
			bottom: 0%;
			width: 100%;
			display: flex;
			justify-content: center;
			padding-bottom: constant(safe-area-inset-bottom);
			/*兼容 IOS<11.2*/
			padding-bottom: env(safe-area-inset-bottom);
			/*兼容 IOS>11.2*/
			height: 110rpx;

			.btn {
				width: 690rpx;
				height: 86rpx;
				line-height: 86rpx;
				text-align: center;
				opacity: 1;
				background: #FF7416;
				border-radius: 43rpx;
				color: #FFFFFF;
			}
		}

		.content {
			width: 100%;
			position: absolute;
			left: 0;
			background-color: #FFFFFF;
			padding: 32rpx;
			box-sizing: border-box;
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			.c_top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #f5f5f5;

				.left {
					.name {
						font-size: 36rpx;
						font-weight: 700;
						color: #333333;
						display: flex;
						align-items: center;
					}

					.name_title {
						width: 540rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2; //几行就填几
						-webkit-box-orient: vertical;
					}

					.n_box {
						display: inline-block;
						border: 1rpx solid #b4b4b4;
						border-radius: 4rpx;
						font-size: 18rpx;
						font-weight: 400;
						color: #666666;
						padding: 4rpx 6rpx;
						margin-right: 10rpx;
					}

					.money {
						font-size: 50rpx;
						font-weight: 700;
						color: #FF7416;
					}
				}

				.right {
					.img {
						width: 40rpx;
						height: 40rpx;
						margin: 0 auto;
					}

					.text {
						text-align: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						margin-top: 10rpx;
					}
				}
			}

			.address {
				display: flex;
				padding: 22rpx 0rpx;
				align-items: center;

				.a_left {
					width: 42rpx;
					height: 42rpx;

					image {
						width: 42rpx;
						height: 42rpx;
					}
				}

				.a_right {
					margin-left: 20rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
				}
			}

			.msg {
				.title {
					display: flex;
					align-items: center;
					margin-top: 14rpx;
					margin-bottom: 14rpx;

					.m_line {
						width: 6rpx;
						height: 30rpx;
						opacity: 1;
						background: #FF7416;
					}

					.m_text {
						font-size: 30rpx;
						font-weight: 700;
						color: #333333;
						margin-left: 12rpx;
					}
				}
			}
		}


		.popup {
			background-color: #FFFFFF;
			padding: 30rpx;
			box-sizing: border-box;

			.top_box {
				position: fixed;
				top: -40rpx;

				.re_top {
					display: flex;
					align-items: center;

					.re_img {
						width: 189rpx;
						height: 189rpx;
					}

					.re_money {
						display: inline-block;
						font-size: 36rpx;
						margin-left: 24rpx;
						margin-top: 30rpx;
						font-weight: 700;
						color: #FF7416;

						text {
							font-size: 28rpx;
						}
					}
				}
			}
		}



		.select {
			border-bottom: 1rpx solid #f5f5f5;
			margin-top: 160rpx;

			.tt {
				max-height: 240rpx;
				overflow: hidden;
				overflow-y: auto;
			}

			.se_title {
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
			}

			.se_list {
				display: flex;
				flex-wrap: wrap;

				.list {
					background: #f5f5f5;
					border: 1rpx solid #f5f5f5;
					border-radius: 4rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					padding: 10rpx 30rpx;
					box-sizing: border-box;
					margin: 10rpx;
					border-radius: 10rpx;
				}

				.list2 {
					background: #FF7416;
					border-radius: 4rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					padding: 10rpx 30rpx;
					box-sizing: border-box;
					color: #FFFFFF;
					margin: 10rpx;
					border-radius: 10rpx;
				}
			}
		}

		.re_list {
			display: flex;
			width: 99%;
			justify-content: space-between;
			align-items: center;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.l_left {
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
			}

			.l_right {
				width: 526rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.r_picker {
					font-size: 24rpx;
					color: #999999;
					width: 100%;
				}

				.r_two {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #999999;
					font-size: 32rpx;

					.add {
						width: 44rpx;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
						box-sizing: border-box;
						background: #f8f8f8;
					}

					.num {
						width: 60rpx;
						font-size: 30rpx;
						padding-left: 18rpx;
						padding-right: 18rpx;
						background: #f8f8f8;

						.input {
							width: 100%;
							height: 100%;
							text-align: center;
						}
					}
				}
			}
		}

		.re_btn {
			width: 690rpx;
			left: 30rpx;
			text-align: center;
			padding-bottom: constant(safe-area-inset-bottom);
			/*兼容 IOS<11.2*/
			padding-bottom: env(safe-area-inset-bottom);
			/*兼容 IOS>11.2*/
			bottom: 0%;
			margin-top: 30rpx;

			.bt {
				height: 80rpx;
				line-height: 80rpx;
				background: #FF7416;
				font-weight: 500;
				color: #FFFFFF;
				border-radius: 40rpx;
				font-size: 30rpx;
			}
		}
	}

	.pop-userinfo {
		padding: 30rpx;
		background-color: #FFFFFF;

		.p-title {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 32rpx;
			color: #333;
			text-align: center;
			font-weight: bold;
		}

		.p-con {
			padding: 50rpx 0;

			.p-img {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				border: 2rpx solid #eee;
				margin: 0 auto;
				overflow: hidden;

				.avatar-btn {
					width: 100%;
					height: 100%;
					padding: 0;
					overflow: hidden;
					float: right;
					margin: 0;
					padding: 0;

					&::after {
						display: none;
					}
				}
			}

			.p-name {
				height: 80rpx;
				line-height: 80rpx;
				width: 540rpx;
				box-sizing: border-box;
				border: 2rpx solid #eee;
				padding: 0 20rpx;
				border-radius: 6rpx;
				margin: 40rpx auto 0;

				.weui-input {
					height: 80rpx;
					line-height: 80rpx;
					width: 100%;
					font-size: 28rpx;
					color: #666;
				}
			}


		}

		.btn {
			width: 75%;
			border-radius: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 40rpx auto 0;
			font-size: 28rpx;
			color: #fff;
			background-color: #FF7416;
			text-align: center;
		}

		.p-btn {
			width: 75%;
			border-radius: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 40rpx auto 0;
			font-size: 28rpx;
			color: #fff;
			background-color: #FF7416;
			text-align: center;
		}
	}


	.canvaspop {
		image {
			width: 570rpx;
			height: 880rpx;
			border-radius: 20rpx;
		}

		.imgs {
			width: 120rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: 20rpx auto;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
</style>